<template>
  <div class="carousel-demo">
    <div class="carousel-container">
      <GlassmorphismCarousel
        :carousel-items="carouselItems"
        :autoplay="carouselConfig.autoplay"
        :autoplay-speed="carouselConfig.autoplaySpeed"
        :dots="carouselConfig.dots"
        :effect="carouselConfig.effect"
      />
    </div>

    <div class="config-container">
      <a-divider>轮播图配置</a-divider>
      <CarouselConfigPanel
        :initial-config="carouselConfig"
        :initial-items="carouselItems"
        @update:config="updateConfig"
        @update:items="updateItems"
        ref="configPanelRef"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, defineProps } from 'vue'
import GlassmorphismCarousel from './GlassmorphismCarousel.vue'
import CarouselConfigPanel from './CarouselConfigPanel.vue'
import '../api/typings.d.ts'

// 定义组件属性
const props = defineProps({
  initialScene: {
    type: String,
    default: 'home',
  },
})

// 定义组件需要使用的类型
interface CarouselConfigData {
  autoplay?: boolean
  autoplaySpeed?: number
  dots?: boolean
  effect?: string
}

interface CarouselItem {
  id?: number
  scene?: string
  imageUrl?: string
  title?: string
  description?: string
  buttonText?: string
  buttonLink?: string
  sort?: number
  status?: number
}

// 当前选中的场景
const currentScene = ref(props.initialScene)

// 轮播图配置
const carouselConfig = reactive<CarouselConfigData>({
  autoplay: true,
  autoplaySpeed: 3000,
  dots: true,
  effect: 'scrollx',
})

// 轮播项数据
const carouselItems = ref<CarouselItem[]>([])

const configPanelRef = ref<InstanceType<typeof CarouselConfigPanel> | null>(null)

// 更新配置
const updateConfig = (newConfig: CarouselConfigData) => {
  Object.assign(carouselConfig, newConfig)
}

// 更新轮播项
const updateItems = (newItems: CarouselItem[]) => {
  carouselItems.value = [...newItems]
}

// 更新场景
const updateScene = async (scene: string) => {
  currentScene.value = scene
  await loadConfigForScene(scene)
}

// 组件挂载时可以从后端加载配置
onMounted(async () => {
  await loadConfigForScene(currentScene.value)
})

// 加载指定场景的配置
const loadConfigForScene = async (scene: string) => {
  currentScene.value = scene
  try {
    // 这里可以调用配置面板组件的方法从后端获取配置
    if (configPanelRef.value) {
      const data = await configPanelRef.value.fetchCarouselConfig(scene)
      if (data) {
        // 确保 effect 是正确的类型
        if (data.config && (data.config.effect === 'scrollx' || data.config.effect === 'fade')) {
          updateConfig(data.config)
        }
        if (data.items && Array.isArray(data.items)) {
          updateItems(data.items)
        }
      }
    }
  } catch (error) {
    console.error(`加载${scene}场景轮播图配置失败:`, error)
  }
}

// 暴露方法
defineExpose({
  updateScene,
  loadConfigForScene,
  currentScene,
})

// 添加默认导出
defineOptions({
  name: 'CarouselDemo',
})
</script>

<style scoped>
.carousel-demo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.carousel-container {
  margin-bottom: 40px;
}

.config-container {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
}
</style>
